<script lang="ts" setup>
import { useIntersectionObserver } from "@vueuse/core";
import { useRouter } from "vue-router";

const router = useRouter();

const props = defineProps<{
  detailVisible: boolean;
}>();

const emit = defineEmits<{
  (e: "scroll-to-detail"): void;
}>();

const tabValue = computed<"home" | "detail">({
  get() {
    return props.detailVisible ? "detail" : "home";
  },
  set(val) {
    if (val === "detail") {
      emit("scroll-to-detail");
    } else {
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: "smooth",
      });
    }
  },
});
</script>

<template>
  <nut-navbar
    class="sticky top-0 z-10"
    :style="{ '--nut-navbar-margin-bottom': 0, '--nut-tabs-titles-item-font-size': '1rem', '--nut-navbar-height': '3.5rem' }"
    @click-back="router.back()"
  >
    <template #left>
      <div>返回</div>
    </template>

    <template #content>
      <nut-tabs v-model="tabValue" class="grow">
        <nut-tab-pane title="课程学习" pane-key="home" />
        <nut-tab-pane title="课程介绍" pane-key="detail" />
      </nut-tabs>
    </template>
  </nut-navbar>
</template>
